<section id="issuer">
  <div class="row" *ngIf="error">
    <div class="col-sm-12">
      {{error}}
    </div>
  </div>

  <div class="row" *ngIf="!loaded && !error">
    <div class="col-sm-12 page-load">
      <div class="loading-indicator"></div>
    </div>
  </div>

  <div class="row" *ngIf="loaded">
    <div class="col-md-8 col-sm-7">
      <h1 class="issuer-title">{{record.name}}</h1>

      <div class="row">
        <div class="col-md-12 issuer-info">
          <div class="row form-group" *ngIf="record.issuerOrgURL">
            <label class="col-sm-4 control-label" translate>issuer.website</label>
            <div class="col-sm-8 form-field">
              <a [href]="record.issuerOrgURL" rel="external">
                {{record.issuerOrgURL}}</a>
              <small><span class="fa fa-external-link"></span></small>
            </div>
          </div>
          <div class="row form-group">
            <label class="col-sm-4 control-label" translate>issuer.effective-date</label>
            <div class="col-sm-8 form-field">
              {{record.effectiveDate}}
            </div>
          </div>
          <div class="row form-group">
            <label class="col-sm-4 control-label" translate>issuer.expiry-date</label>
            <div class="col-sm-8 form-field">
              {{record.endDate || '-'}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row mrgn-tp-md mrgn-bttm-lg issuer-certs" *ngIf="loaded">
    <hr>
    <div class="col-sm-12">
      <label class="control-label"><span class="field-name" translate>issuer.cert-types</span></label>
      <div class="types-outer">
        <div *ngFor="let type of claimTypes" class="cert">
          <div class="panel cert-panel">
            <div class="panel-body cert-main">
              <h3 class="panel-title">{{type.claimType}}</h3>
              <p class="mrgn-bttm-0">
                <a [href]="type.issuerURL" rel="external">
                  {{type.issuerURL}}</a>
                <small><span class="fa fa-external-link"></span></small>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div *ngIf="!claimTypes.length">
        <em class="text-muted" translate>general.none</em>
      </div>
    </div>
  </div>
</section>
